<template>
    <div>
        <!--查询框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="公司名称:">
                <el-input v-model="formInline.companyName" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="客户账号:">
                <el-input v-model="formInline.account" placeholder="请输入账户"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table id="realNameList" :data="tableData" height="500px" max-height="500px" size="500px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
            <el-table-column align="center" label="公司名称" prop="companyName"></el-table-column>
            <el-table-column align="center" label="法人" prop="corporation"></el-table-column>
            <el-table-column align="center" label="身份证号" prop="userId"></el-table-column>
            <el-table-column align="center" label="所属客户" prop="belongCustomer"></el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 1" type="success">审核通过</el-tag>
                    <el-tag v-else-if="scope.row.status == 0" type="info">未审核</el-tag>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="create_time"></el-table-column>
            <el-table-column align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)">详情</el-button>
                    <el-button v-if="scope.row.status == 0" type="text" @click="auditSuccess(scope.row)">审核通过</el-button>
                    <el-button v-if="scope.row.status == 0" type="text" @click="auditFailed(scope.row)">审核不通过</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pageHelper>
        </div>

        <!--详情-->
        <el-dialog title="账户信息" :visible.sync="dialogVisible" width="800px">
            <template>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="公司编号:">
                        <!--<el-input v-model="form.companyId" disabled="true"></el-input>-->
                        <span>{{ form.companyId }}</span>
                    </el-form-item>
                    <el-form-item label="营业执照:">
                        <img :src="form.business_url">
                    </el-form-item>
                    <el-form-item label="身份证正面:">
                        <img :src="form.idCard_up_url">
                    </el-form-item>
                    <el-form-item label="身份证反面:">
                        <img :src="form.idCard_down_url">
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="closeDialog">关闭</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>

    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import {mytips} from '@/module/tools';
    import pageHelper from '../common/pageHelper';

    document.title='实名列表';
    export default {
        name: 'customerNameList',
        components: {pagination,pageHelper},
        data() {
            return {
                form: {
                    companyId: '',
                    business_url: '',
                    idCard_up_url: '',
                    idCard_down_url: ''
                },
                formInline: {
                    companyName: '',
                    account: '',
                },
                dialogVisible: false,
                //表格数据
                tableData: [
                    {
                        companyName: '前海',
                        corporation: '刘恒',
                        companyId: '879547',
                        userId: '541542',
                        belongCustomer: '王涛',
                        status: 1,
                        create_time: '2018-05-01',
                        image: 'http://hfbimg.wukongcz.com/366019153533840444450c5bf64d2a4c.jpg'
                    },
                    {
                        companyName: '原力',
                        corporation: '泽芬',
                        companyId: '9578451',
                        userId: '541542',
                        belongCustomer: '磊子',
                        status: 0,
                        create_time: '2018-06-01',
                        image: 'http://hfbimg.wukongcz.com/7196091535594976484宝宝.jpg'
                    }
                ],
                totalPage: 0,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: null
            };
        },

        mounted() {
            this.getData();
        },
        methods: {
            /*翻页跳转处理，传入页数*/
            getData: function (page,size) {
                page = page || 1;
                size = size || 10;

                let target = document.getElementById('realNameList');
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,1)',
                    target: target,
                    spinner: 'el-icon-loading'
                });
                axios.post(
                    API_PATH + "/am/realName",
                    {
                        page: page,
                        pageSize: size,
                        companyName: this.formInline.companyName,
                        account: this.formInline.account
                    }
                ).then(
                    res => {
                        this.loading.close();
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.totalPage = Math.ceil(res.data.data.total / size);
                            this.total = Math.ceil(res.data.data.total);
                            this.pageSize = size;
                            this.currentPage = page;
                        }
                    },
                    xhr => this.loading.close()
                );
            },
            //关闭详情页
            closeDialog() {
                this.dialogVisible = false;
                this.form.companyId = '';
                this.form.business_url = '';
                this.form.idCard_up_url = '';
                this.form.idCard_down_url = '';
            },
            //每页显示多少条
            handleSizeChange(size) {
                this.pageSize = size;
                this.getData(1,this.pageSize);
            },
            //当前页
            handleCurrentChange(page) {
                this.getData(page,this.pageSize)
            },
            //查看单一项
            handleClick(row) {
                //this.form = row ;会把row的地址一起传过去,会导致,如果清空this.form数据 会把原先表格数据一起取消
                //所以进行每个 值 得传递
                this.form.companyId = row.companyId;
                this.form.business_url = row.business_url;
                this.form.idCard_up_url = row.idCard_up_url;
                this.form.idCard_down_url = row.idCard_down_url;
                this.dialogVisible = true;
            },
            //审核通过
            auditSuccess(row) {
                this.$confirm('确定审核通过,是否继续?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(
                        API_PATH + "/audit",
                        {
                            status: 1,
                            account: row.account
                        }
                    ).then(res => {
                        if (res.data.code == 0) {
                            mytips('操作成功')
                        }
                    });
                    this.getData();
                }).catch(() => {
                    mytips('已取消')
                })
            },
            //审核不通过
            auditFailed(row) {
                this.$confirm('确定审核不通过,是否继续?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(
                        API_PATH + "/audit",
                        {
                            status: -1,
                            account: row.account
                        }
                    ).then(res => {
                        if (res.data.code == 0) {
                            mytips('操作成功')
                        }
                    });
                    this.getData();
                }).catch(() => {
                    mytips('已取消')
                })
            }
        }
    }
</script>

